<template>
  <view class="login-container">
    <!-- 波浪背景 -->
    <view class="wave-container">
      <view class="wave wave1"></view>
      <view class="wave wave2"></view>
    </view>

    <!-- 主内容区 -->
    <view class="content-container">
      <!-- Logo区域 -->
      <view class="logo-area">
        <image
          src="/static/images/Logo.jpg"
          class="logo-image"
          mode="aspectFit"
        />
        <view class="brand">
          <text class="brand-title">浣颜美容养生会所 </text>
        </view>
      </view>

      <!-- 登录/注册切换 -->
      <view class="tab-container">
        <view
          class="tab-item"
          :class="{ 'tab-active': isLogin }"
          @tap="switchMode(true)"
        >
          <text>登录</text>
          <view class="tab-line" v-if="isLogin"></view>
        </view>
        <view
          class="tab-item"
          :class="{ 'tab-active': !isLogin }"
          @tap="switchMode(false)"
        >
          <text>注册</text>
          <view class="tab-line" v-if="!isLogin"></view>
        </view>
      </view>

      <!-- 表单区域 -->
      <view class="form-container">
        <!-- 手机号输入 -->
        <view class="input-group">
          <view class="input-icon">
            <img
              src="@/static/user/icon_login_phone.svg"
              alt=""
              class="w-[58rpx] h-[58rpx]"
            />
          </view>
          <input
            type="number"
            v-model="form.userAccount"
            placeholder="请输入手机号"
            class="input-control"
            maxlength="11"
            placeholder-class="placeholder-style"
          />
        </view>

        <!-- 密码输入 -->
        <view class="input-group">
          <view class="input-icon">
            <img
              src="@/static/user/icon_login_password.svg"
              alt=""
              class="w-[48rpx] h-[48rpx]"
            />
          </view>
          <input
            :type="showPassword ? 'text' : 'password'"
            v-model="form.userPassword"
            placeholder="请输入密码"
            class="input-control"
            placeholder-class="placeholder-style"
          />
          <view class="input-action" @tap="showPassword = !showPassword">
            <view
              :class="showPassword ? 'i-carbon-view' : 'i-carbon-view-off'"
            ></view>
          </view>
        </view>

        <!-- 确认密码输入 (仅注册时显示) -->
        <view class="input-group" v-if="!isLogin">
          <view class="input-icon">
            <img
              src="@/static/user/icon_login_password_2.svg"
              alt=""
              class="w-[80rpx] h-[80rpx]"
            />
          </view>
          <input
            :type="showConfirmPassword ? 'text' : 'password'"
            v-model="form.checkPassword"
            placeholder="请确认密码"
            class="input-control"
            placeholder-class="placeholder-style"
          />
          <view
            class="input-action"
            @tap="showConfirmPassword = !showConfirmPassword"
          >
            <view
              :class="
                showConfirmPassword ? 'i-carbon-view' : 'i-carbon-view-off'
              "
            ></view>
          </view>
        </view>

        <!-- 提交按钮 -->
        <button class="submit-button" @tap="handleSubmit">
          <text>{{ isLogin ? "登 录" : "注 册" }}</text>
        </button>
      </view>

      <!-- 隐私政策 -->
      <view class="privacy-policy">
        <checkbox-group @change="handleChange">
          <label>
            <checkbox value="agree" :checked="agreePrivacy" color="#AF6C31" />
          </label>
        </checkbox-group>
        <text class="policy-text">
          已阅读并同意
          <text class="policy-link" @tap.stop="showPrivacyPolicy"
            >《隐私政策》</text
          >
        </text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { login, register } from "@/api";
import type { LoginData } from "@/api";
import { setToken } from "@/commom/token";

// 表单数据
const form: LoginData = reactive({
  userAccount: "",
  userPassword: "",
  checkPassword: "",
});

const isLogin = ref(true);
const agreePrivacy = ref(false);
const showPassword = ref(false);
const showConfirmPassword = ref(false);

// 切换登录/注册模式
const switchMode = (mode: boolean) => {
  isLogin.value = mode;
  // 重置表单
  form.userAccount = "";
  form.userPassword = "";
  form.checkPassword = "";
};

// 隐私政策勾选
const handleChange = (e: any) => {
  agreePrivacy.value = e.detail.value.includes("agree");
};

// 处理提交（登录或注册）
const handleSubmit = () => {
  if (!agreePrivacy.value) {
    uni.showModal({
      title: "提示",
      content: "请先同意隐私政策",
      confirmText: "确定",
      cancelText: "取消",
      success(res) {
        if (res.confirm) {
          agreePrivacy.value = true;
        }
      },
    });
    return;
  }

  if (!form.userAccount) {
    uni.showToast({
      title: "请输入手机号",
      icon: "none",
    });
    return;
  }

  if (!form.userPassword) {
    uni.showToast({
      title: "请输入密码",
      icon: "none",
    });
    return;
  }

  // 手机号格式验证
  if (!/^1[3-9]\d{9}$/.test(form.userAccount)) {
    uni.showToast({
      title: "手机号格式不正确",
      icon: "none",
    });
    return;
  }

  if (isLogin.value) {
    // 登录逻辑
    handleLogin();
  } else {
    // 注册逻辑
    handleRegister();
  }
};

// 登录
const handleLogin = () => {
  uni.showLoading({
    title: "登录中...",
  });

  login({
    userAccount: form.userAccount,
    userPassword: form.userPassword,
  })
    .then((res: any) => {
      uni.hideLoading();
      if (res && res.code == 200) {
        if (!res.data) return;
        console.log(res, "sss");

        setToken(res.data?.token);
        uni.setStorageSync("userInfo", res.data);
        uni.switchTab({
          url: "/pages/home/index",
        });
      }
    })
    .catch(() => {
      uni.hideLoading();
    });
};

// 注册
const handleRegister = () => {
  // 确认密码验证
  if (form.userPassword !== form.checkPassword) {
    uni.showToast({
      title: "两次密码输入不一致",
      icon: "none",
    });
    return;
  }

  // 密码强度验证
  if (form.userPassword.length < 6) {
    uni.showToast({
      title: "密码长度不能小于6位",
      icon: "none",
    });
    return;
  }

  uni.showLoading({
    title: "注册中...",
  });

  register({
    userAccount: form.userAccount,
    userPassword: form.userPassword,
    checkPassword: form.checkPassword,
  })
    .then((res: any) => {
      uni.hideLoading();
      if (res && res.code == 200) {
        uni.showToast({
          title: "注册成功，请登录",
          icon: "none",
        });
        // 注册成功后切换到登录
        switchMode(true);
      }
    })
    .catch(() => {
      uni.hideLoading();
      uni.showToast({
        title: "注册失败，请稍后再试",
        icon: "none",
      });
    });
};

// 隐私政策
const showPrivacyPolicy = () => {
  uni.navigateTo({
    url: "/pages/privacy/index",
  });
};
</script>

<style>
/* 全局样式 */
.login-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: linear-gradient(135deg, #faf8f5 0%, #f5f2ee 100%);
}

/* 波浪背景 */
.wave-container {
  position: absolute;
  width: 100%;
  height: 40vh;
  top: 0;
  left: 0;
  overflow: hidden;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(135deg, #d4a574 0%, #af6c31 50%, #e3c377 100%);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

.wave1 {
  animation: wave 15s linear infinite;
  z-index: 1;
  opacity: 0.5;
  bottom: -25%;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

.wave2 {
  animation: wave 10s linear infinite reverse;
  z-index: 2;
  opacity: 0.3;
  bottom: -35%;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

@keyframes wave {
  0% {
    transform: translateX(0) rotate(0);
  }
  50% {
    transform: translateX(-25%) rotate(5deg);
  }
  100% {
    transform: translateX(-50%) rotate(0);
  }
}

/* 内容容器 */
.content-container {
  flex: 1;
  padding: 0 40rpx;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 10;
}

/* Logo区域 */
.logo-area {
  margin-top: 180rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeIn 1s ease;
}

.logo-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.15);
  margin-bottom: 30rpx;
  background: #ffffff;
  transform: rotate(-5deg);
}

.brand {
  text-align: center;
}

.brand-title {
  font-size: 48rpx;
  font-weight: bold;
  background: linear-gradient(135deg, #d4a574 0%, #af6c31 50%, #e3c377 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin-bottom: 10rpx;
  letter-spacing: 4rpx;
}

.brand-subtitle {
  font-size: 28rpx;
  color: #8a8a8a;
  letter-spacing: 2rpx;
}

/* 标签切换 */
.tab-container {
  display: flex;
  justify-content: center;
  margin: 60rpx 0 40rpx;
}

.tab-item {
  padding: 20rpx 40rpx;
  margin: 0 30rpx;
  position: relative;
  transition: all 0.3s;
}

.tab-active {
  color: #af6c31;
  font-weight: 500;
}

.tab-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 6rpx;
  background: linear-gradient(90deg, #d4a574 0%, #af6c31 100%);
  border-radius: 6rpx;
}

/* 表单区域 */
.form-container {
  margin-top: 20rpx;
  width: 100%;
}

.input-group {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  padding: 10rpx 30rpx;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  min-height: 110rpx;
}

.input-group:hover,
.input-group:focus-within {
  box-shadow: 0 10rpx 25rpx rgba(127, 127, 213, 0.15);
  transform: translateY(-2rpx);
}

.input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60rpx;
  color: #af6c31;
}

.input-icon view {
  font-size: 40rpx;
}

.input-control {
  flex: 1;
  padding: 15rpx 20rpx;
  font-size: 32rpx;
  min-height: 80rpx;
  color: #333;
}

.placeholder-style {
  color: #bbb;
  font-size: 30rpx;
}

.input-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60rpx;
  color: #a0a0a0;
}

.input-action view {
  font-size: 40rpx;
}

/* 文本链接 */
.text-link {
  text-align: center;
  color: #af6c31;
  font-size: 28rpx;
  margin: 20rpx 0 40rpx;
}

/* 提交按钮 */
.submit-button {
  background: linear-gradient(135deg, #d4a574 0%, #af6c31 50%, #e3c377 100%);
  color: white;
  border-radius: 50rpx;
  padding: 24rpx;
  font-size: 32rpx;
  letter-spacing: 8rpx;
  margin-top: 40rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 15rpx 30rpx rgba(175, 108, 49, 0.3);
  transition: all 0.3s;
  border: none;
  height: auto;
  line-height: 1.5;
}

.submit-button:active {
  transform: scale(0.98);
  box-shadow: 0 8rpx 15rpx rgba(175, 108, 49, 0.2);
}

/* 隐私政策 */
.privacy-policy {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20rpx 0;
}

.policy-text {
  font-size: 26rpx;
  color: #8a8a8a;
  margin-left: 10rpx;
}

.policy-link {
  color: #af6c31;
}

/* 装饰元素 */
.decoration {
  position: absolute;
  bottom: 60rpx;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20rpx;
}

.dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: #e3c377;
}

.dot1 {
  animation: pulse 2s infinite;
}

.dot2 {
  animation: pulse 2s infinite 0.5s;
}

.dot3 {
  animation: pulse 2s infinite 1s;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Checkbox样式 */
:deep(.wx-checkbox-input) {
  width: 28rpx !important;
  height: 28rpx !important;
  border-radius: 50% !important;
  border: 2rpx solid #af6c31 !important;
}

:deep(.wx-checkbox-input.wx-checkbox-input-checked) {
  color: #fff !important;
  background: #af6c31 !important;
  border: none !important;
}
</style>
